<template>
    <div>
        <banner v-if="ifban" @if-ban="ifBan"></banner>
        <div class="container" 
        @touchstart.stop="touDown" 
        @touchend.stop="touUp" 
        @touchmove.stop="touMove"
        @contextmenu.prevent="cont">
            <div :class="['wrapper', isvip ? 'fix' : '']" ref="wrapBg">
                <!-- 文章内容 -->
                <div v-html="booksCont" v-if="booksCont" ref="content"></div>
                <div class="pay" v-if="isvip">
                    <div class="btn" @click="money">
                        付费看全部内容
                    </div>
                </div>
                <!-- 底部按钮 -->
                <div class="footer">
                    <div class="give">
                        <!-- <img src="../assets/images/shangButton.png" alt="">
                        <span>打赏作者</span> -->
                    </div>
                    <div :class="[isvip ? 'menu_fix' : '','menu']">
                        <ul ref="btnBg">
                            <li @click="perv">
                                <span>上一章</span>
                            </li>
                            <li @click="wrap_nav = true">
                                <span>菜单</span>
                            </li>
                            <li>
                                <span>下载</span>
                            </li>
                            <li @click="next">
                                <span>下一章</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            
            <!-- 菜单栏 -->
            <div class="wrap" v-show="wrap_nav" @click.self="wrap_nav = false">
                <div class="nav">
                    <div class="font">
                        <span>字号</span>
                        <div class="font_nav">
                            <div class="font_btn" @click="fontSize(true)">A+</div>
                            <div class="size">{{ fSize - 2}}</div>
                            <div class="font_btn" @click="fontSize(false)">A-</div>
                        </div>
                    </div>
                    <div class="bg">
                        <span>背景</span>
                        <div class="bg_subnav">
                            <div :class="['col',colInd == 0? 'con':'']" @click="wrapbg(0)"></div>
                            <div :class="['col',colInd == 1? 'con':'']" @click="wrapbg(1)"></div>
                            <div :class="['col',colInd == 2? 'con':'']" @click="wrapbg(2)"></div>
                            <div :class="['col',colInd == 3? 'con':'']" @click="wrapbg(3)"></div>
                            <div :class="['col',colInd == 4? 'con':'']" @click="wrapbg(4)"></div>
                            <div :class="['col',colInd == 5? 'con':'']" @click="wrapbg(5)"></div>
                            <div :class="['col',colInd == 6? 'con':'']" @click="wrapbg(6)"></div>
                        </div>
                    </div>
                    <div class="subnav">
                        <ul>
                            <router-link tag="li" :to="{ path: '/list', query: { pages: obj.listInd }}">
                                <img src="../assets/images/ml_1.png" alt="">
                                <span>书籍目录</span>
                            </router-link>
                            <router-link tag="li" :to="{ path: '/about', query: { userId: obj.listInd } }">
                                <img src="../assets/images/ml_2.png" alt="">
                                <span>作品信息</span>
                            </router-link>
                            <router-link tag="li" to="/">
                                <img src="../assets/images/ml_3.png" alt="">
                                <span>返回首页</span>
                            </router-link>
                            <li @click="wrap_nav = false">
                                <img src="../assets/images/ml_4.png" alt="">
                                <span>关闭菜单</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getReadData } from '../api/read';
import { getListData } from '../api/list';
import { getJsonData } from '../api/home';
import banner from "../components/HomeMView.vue";

export default {
    data(){
        return {
            booksCont:null,//文章内容
            wrap_nav:false,//菜单栏显示
            fSize:14,//文字大小
            color:[
                ['#e8e6e1','#323232','#e7dcca','#e5efeb','#f5e9ee','#e5e9ef','#606873'],//背景色
                ['#f2f0eb', '#323232', '#f4ecdf', '#ebf2da', '#f9e2e2', '#f0f4f9','#5d6673'],//按钮色
                ['#4e4d4c', '#6b6b6b', '#7a4c00', '#287028', '#9b486b', '#5868a5','#adb6ca']//标题色
            ],//背景色和按钮色
            colInd:0,//按钮对应的下标
            readInd:0,//文章数
            topic:0,//真·文章数
            obj:null,//路由参数
            timer:null,//屏幕定时器
            isvip:false,//vip
            ifban: false, //是否展示广告

        }
    },
    created() {
        this.obj = this.$route.query;
        if(this.obj.vip == 1){
            this.isvip = true;
        }
        this.topic = parseInt(this.obj.ind) - 1;//计算文章数
        this.readInd = parseInt(this.topic) % 3;

      
        
        getReadData().then(data => {
            this.booksCont = data[this.readInd].data.content;
        })
        
    },
    methods:{
        ifBan() {//是否展示广告
            this.ifban = !this.ifban
        },
        fontSize(add){//改变字体大小
            if(add){
                this.fSize >= 32 ? this.$toast('字体不能再大了哦') : this.fSize = this.fSize + 2;
            }else{
                this.fSize <= 14 ? this.$toast('字体不能再小了哦') : this.fSize = this.fSize - 2;
            }

           let nodeP = this.$refs.content.querySelectorAll("p");
            for (let i = 0; i < nodeP.length; i++){
                nodeP[i].style.fontSize = this.fSize + 'px';
            }
            
            localStorage.setItem('size',this.fSize);

        },
        wrapbg(ind){//改变背景、字体、标题的颜色
            this.colInd = ind;
            this.$refs.wrapBg.style.backgroundColor = this.color[0][ind];
            let btns = this.$refs.btnBg.querySelectorAll("span");//获取按钮元素
            let tit = this.$refs.wrapBg.querySelector("h1");
            for(let i = 0; i < btns.length; i++){
                btns[i].style.backgroundColor = this.color[1][ind];
                tit.style.color = this.color[2][ind];
            }
            localStorage.setItem('ind', ind)
            
        },
        touDown(){
            // console.log('按下');
            this.timer = setTimeout(() => {
                this.fun()
            }, 1000);
        },
        touUp(){
            // console.log('弹起');
            clearTimeout(this.timer)
        },
        touMove(){
            // console.log('滑动');
            clearTimeout(this.timer)
        },
        fun(){//长按屏幕弹出菜单
            this.wrap_nav = true;
        },
        perv(){//上一章
            if(this.topic == 0){
                this.$toast('已经到头了，没有上一章');
                return
            }
            window.scroll(0, 0)

           this.pages('perv');
           this.topic -= 1;
           
        },
        next(){//下一章
            if (this.topic == this.obj.len - 1 ){
                this.$toast('已经到头了，没有下一章');
                return
            }
            window.scroll(0,0);
            this.pages('next');
            this.topic += 1;
            // getJsonData().then(data => {
            //     var booksData = data.data.books[listInd].sourceUrl;
            //     // console.log(booksData, 'booksData');
            //     getListData({ tocId: booksData }).then(data => {
            //         let booksList = data.ncx.navMap.navPoint;

            //         vip = booksList[ind].vip, 'vip';
            //         // console.log(booksList[ind], 'list');
            //         this.$router.push({
            //             path: '/read', query: {
            //                 ind: ind,
            //                 len: this.obj.len,
            //                 listInd: this.obj.listInd,
            //                 vip: vip
            //             }
            //         })
            //     })
            // })
           



            // window.scroll(0, 0)
            // this.topic = parseInt(this.topic) + 1;
            // this.readInd = parseInt(this.topic) % 3;

            // getReadData().then(data => {
            //     this.booksCont = data[this.readInd].data.content;
            // })
        },
        cont(){//禁止右键菜单
            return false
        },
        pages(bool){
            console.log('pages');
            let ind = 0;
             getListData().then(data => {
                var vip = 0;
                if(bool == 'perv'){
                    ind = parseInt(this.obj.ind) - 1;
                }else if(bool == 'next'){
                    ind = parseInt(this.obj.ind) + 1;
                }

                let booksList = data.data[this.obj.listInd].ncx.navMap.navPoint;
                vip = booksList[ind].vip, 'vip';
                // console.log(booksList[ind], 'list');
                this.$router.push({
                    path: '/read', query: {
                        ind: ind,
                        len: this.obj.len,
                        listInd: this.obj.listInd,
                        vip: vip
                    }
                })
            })
            getJsonData().then(data =>{
                let key = data.data.books[this.obj.listInd].title;
                let value = this.topic + 1;
                localStorage.setItem(key,value)
            })
        },
        money(){
            this.$dialog.confirm({
                title: '是否支付100书币看本章小说',
                message: '',
                confirmButtonText:'支付',
                cancelButtonText:'我要免单',
                cancelButtonColor:'#9b486b'
            }).then(() => {
                //    console.log('支付');
                   this.payment();
            })
            .catch(() => {
                // console.log('免单');
                this.ifBan();
            });
        },
        payment(){//正常支付
            let pay = window.localStorage.getItem("pay");
            if(pay == null && pay < 100){
                this.$router.push('/pay');
            } else {
                pay -= 100;
                this.isvip = false;
                // console.log(this.isvip,'支付');

                let cont = document.querySelector(".g-book");
                    cont.classList.remove("hei");
                
            }
            // console.log(pay);
        },
        loadCol(){//章节切换存储颜色主题

        }

    },
    updated() {
        let index = localStorage.getItem('ind');
        this.wrapbg(index);//章节切换时保持背景一致


        let size = localStorage.getItem('size');
        size = Number(size);
        if(size == 0){
            size = this.size;
        }


        let nodeP = this.$refs.content.querySelectorAll("p");
        for (let i = 0; i < nodeP.length; i++) {
            nodeP[i].style.fontSize = size + 'px';
        }
        this.fSize = size;

        let cont = document.querySelector(".g-book");
        if(this.isvip){
            cont.classList.add("hei");
        } 
        
        
        let free = window.sessionStorage.getItem('free');
        // console.log(free == 'true',291);
        if(free == 'true'){
            cont.classList.remove("hei");
            
            window.sessionStorage.setItem('free',false);
            
        }

          
    },
    
    components: {
        banner
    },
    watch: {
        colInd(val) {//侦听被选中的颜色的下标
            if(val == 1 || val == 6){
                this.$refs.wrapBg.classList.add("fCol");
            }else{
                this.$refs.wrapBg.classList.remove("fCol");
            }
        },
    }
    
}

</script>

<style lang="scss" scoped>
.fix{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.pay{
    padding-top: 20px;
    .btn{
        font-size: 17px;
        color: #ea4136;
        text-align: center;
        text-align: center;
        border: 1px solid #ea4136;
        margin: 30px auto;
        padding: 10px 30px;
    }
}
.wrapper{
    padding: 16px;
    background-color: #e8e6e1;
    ::v-deep .m-content{
        font-size: 14px;
        color: #2f342f;
        
        h1{
            height: 34px;
            line-height: 34px;
            font-size: 26px;
            font-weight: bold;
            padding-bottom: 23px;
            
        }
        .author{
            display: flex;
            align-items: center;
            img{
                width: 44px;
                height: 44px;
                border-radius: 50%;
            }
            span{
                color: #666;
                font-size: 16px;
                padding-left: 12px;
            }
        }
        p{
            line-height: 32px;
            text-indent: 28px;
        }
    }
    ::v-deep .hei{
        height: 200px;
            overflow: hidden;
    }
    .footer{
        padding-top: 56px;
        .give{
            img{
                width: 78px;
                height: 78px;
                margin: auto;
            }
            span{
                display: block;
                text-align: center;
                font-size: 13px;
                color: #999;
            }
        }
        .menu{
            
            ul{
                padding-bottom: 12px;
                display: flex;
                justify-content: space-between;
                li{
                    flex: 1;
                    span{
                        display: block;
                        border: 1px solid #c9c9c9;
                        font-size: 15px;
                        color: #333;
                        text-align: center;
                        height: 33px;
                        line-height: 33px;
                        width: 74px;
                        margin: auto;
                    }
                }
            }
        }
        .menu_fix{
            position: fixed;
                bottom: 0px;
                left: 0px;
                width: 100%;
        }
    }
}

::v-deep .fCol{
    p{
        color: #999 !important;
    }
    span{
        color: #999 !important;
    }
}
.wrap{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba($color: #000000, $alpha: 0.7);
    .nav{
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 198px;
        background-color: #fff;
        .font{
            display: flex;
            padding: 22px 15px 0 15px;
            .font_nav{
                display: flex;
                justify-content: space-between;
                flex: 1;
                .font_btn{
                    width: 80px;
                    height: 33px;
                    border: 1px solid #d0d0d0;
                    color: #ea4136;
                    line-height: 33px;
                    text-align: center;
                    border-radius: 3px;
                    font-size: 19px;
                }
                .size{
                    color: #999;
                    font-size: 19px;
                    height: 35px;
                    line-height: 35px;
                    text-align: center;
                }
            }
        }
        .bg{
            display: flex;
            padding: 17px 15px;
            .bg_subnav{
                flex: 1;
                display: flex;
                justify-content: space-between;
                .col{
                    border: 2px solid transparent;
                    height: 30px;
                    width: 30px;
                    border-radius: 50%;
                    &:nth-child(1){
                        background-color: #e8e6e1;
                    }
                    &:nth-child(2){
                        background-color: #323232;
                    }
                    &:nth-child(3){
                        background-color: #e7dcca;
                    }
                    &:nth-child(4){
                        background-color: #e5efeb;
                    }
                    &:nth-child(5){
                        background-color: #f5e9ee;
                    }
                    &:nth-child(6){
                        background-color: #e5e9ef;
                    }
                    &:nth-child(7){
                        background-color: #606873;
                    }
                }
                .con{
                    border-color: #ea4136;
                }
            }
        }
        .subnav{
            padding: 4px 0;
            border-top: 1px solid #ededed;
            ul{
                display: flex;
                align-items: center;
                
                li{
                    flex: 1;
                    img{
                        width: 22px;
                        height: 21px;
                        margin: 5px auto 0 auto;
                    }
                    span{
                        width: 100%;
                        height: 35px;
                        line-height: 35px;
                        font-size: 12px;
                        color: #666;
                        text-align: center;
                        display: block;
                    }
                }
            }
        }
        span{
            height: 35px;
            width: 56px;
            display: block;
            text-align: center;
            line-height: 35px;
            font-size: 15px;
        }
    }
}
</style>